import React, { Component } from 'react';
import { Form, Input, Button, message, Upload, Radio } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { getMemberInfo } from '../../../../utils/auth'
import memberApi from '../../../../api/member'
class Info extends Component {

  state = {
    loading: false,
    imageUrl: '',
    nickname: '',
    gender: '',
    motto: '',
  };

  componentDidMount(){
    const {nickname,avatar,gender,motto} = getMemberInfo()
    this.setState({
      nickname:nickname,imageUrl:avatar,gender:gender,motto:motto
    })
  }

  editFormRef = React.createRef()

  beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('只能上传jpg和png格式的头像!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('图片大小不能超过2MB!');
    }
    return isJpgOrPng && isLt2M;
  }

  handleEdit = (data) => {
    const id = getMemberInfo().id
    const avatar = this.state.imageUrl
    const jsonData = {id,avatar,...data}
    memberApi.update(jsonData).then(res=>{
      if(res.success){
        message.success("修改资料成功")
        this.setState({})
      }
    }).catch(err=>{
      console.log(err);
    })
  }

  handleChange = info => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      this.setState({ loading: false, imageUrl: info.file.response.url });
    }
  };

  normFile = (e) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  render() {
    const { loading, imageUrl} = this.state;
    const {nickname,gender,motto,email} = getMemberInfo()
    const uploadButton = (
      <div>
        {loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    return (
      <div style={{ padding: '20px',marginBottom:'8px' }}>
        <Form
          onFinish={this.handleEdit}
          ref={this.editFormRef}
          initialValues={
            {nickname,gender,motto,email}
          }
        >
          <Form.Item
            label="头像"
            valuePropName="fileList"
            rules={[{ required: true, message: '请编辑头像!' }]}
          >
            <Upload
              name="file"
              accept=".jpg, .jpeg, .png"
              listType="picture-card"
              className="avatar-uploader"
              showUploadList={false}
              action={"http://www.yfkdu.cn:2678/file/authUpload"}
              beforeUpload={this.beforeUpload}
              onChange={this.handleChange}
            >
              {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
            </Upload>
          </Form.Item>
          <Form.Item
            label="性别"
            name="gender"
            rules={[{ required: true, message: '请编辑性别!' }]}
          >
            <Radio.Group >
              <Radio value={1}>男</Radio>
              <Radio value={0}>女</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            label="昵称"
            name="nickname"
            rules={[{ required: true, message: '请编辑昵称!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="邮箱"
            name="email"
            rules={[{ required: true, message: '请编辑邮箱!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="格言"
            name="motto"
            rules={[{ required: true, message: '请编辑格言!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item style={{ textAlign: 'right' }}>
            <Button type="primary" htmlType="submit">修改资料</Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default Info;